import React, { Component } from 'react';
import './Mv.css'
import PropTYpes from 'prop-types'
class Mv extends Component {
    //数据 状态
    // state={
    //     mvArr:[
    //         {
    //         "id": 5334103,
    //         "cover": "http://p1.music.126.net/G09rskU97H10HPPowgUIng==/1426066593488734.jpg",
    //         "name": "温暖你的冬 录音花絮2",
    //         "playCount": 61787,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "欧阳娜娜",
    //         "artistId": 1087140,
    //         "duration": 146470,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 1087140,
    //             "name": "欧阳娜娜",
    //             "alias": ["Nana Ou-yang", "娜比"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10928981,
    //         "cover": "http://p1.music.126.net/Sacm9rVUjFIagBJ3KLfVHw==/109951164920088043.jpg",
    //         "name": "BilalTallanma",
    //         "playCount": 170126,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Bilal Enwer",
    //         "artistId": 1039011,
    //         "duration": 1455000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 1039011,
    //             "name": "Bilal Enwer",
    //             "alias": [],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10880673,
    //         "cover": "http://p1.music.126.net/jvHGykRirEXz1hzqNEnPCA==/109951164240795974.jpg",
    //         "name": "起风了",
    //         "playCount": 6033623,
    //         "briefDesc": "吴青峰热单《起风了》MV公开！",
    //         "desc": null,
    //         "artistName": "吴青峰",
    //         "artistId": 187229,
    //         "duration": 303000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 187229,
    //             "name": "吴青峰",
    //             "alias": ["可人儿", "吴啾咪", "Greeny"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10929612,
    //         "cover": "http://p1.music.126.net/x9oKLgPzfqKbwExhd1RmRA==/109951164922321089.jpg",
    //         "name": "덤더럼 (Dumhdurum) | SBS人气歌谣 20/04/19 现场版",
    //         "playCount": 95710,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Apink",
    //         "artistId": 126277,
    //         "duration": 226000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 126277,
    //             "name": "Apink",
    //             "alias": ["에이핑크", "A pink", "阿粉"],
    //             "transNames": ["에이핑크"]
    //         }]
    //     }, {
    //         "id": 10862189,
    //         "cover": "http://p1.music.126.net/rHAgVJmMnIfFTry6W9tJmw==/109951163962637943.jpg",
    //         "name": "上学威龙",
    //         "playCount": 4757901,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "法老",
    //         "artistId": 865007,
    //         "duration": 214000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 865007,
    //             "name": "法老",
    //             "alias": [],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10862160,
    //         "cover": "http://p1.music.126.net/H6wSPKjK54lkw0ZJFBIa8Q==/109951163962253077.jpg",
    //         "name": "bad guy",
    //         "playCount": 17694915,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Billie Eilish",
    //         "artistId": 11972054,
    //         "duration": 205000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 11972054,
    //             "name": "Billie Eilish",
    //             "alias": ["碧梨", "Billie Eilish Pirate Baird O'Connell"],
    //             "transNames": ["比莉·艾利什"]
    //         }]
    //     }, {
    //         "id": 10919322,
    //         "cover": "http://p1.music.126.net/ZQ-gtRQ9V62nsMV9HKfweg==/109951164771170702.jpg",
    //         "name": "BTS (방탄소년단) 'Black Swan' Official MV",
    //         "playCount": 1945495,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "BTS (防弹少年团)",
    //         "artistId": 783124,
    //         "duration": 217000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 783124,
    //             "name": "BTS (防弹少年团)",
    //             "alias": ["방탄소년단", "BTS", "Bangtan Boys", "胖蛋", "防弹少年团", "bts 防弹少年团"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 5617045,
    //         "cover": "http://p1.music.126.net/AeqFssNiKB-aKodmx-KhUw==/18793952255574830.jpg",
    //         "name": "Ablikim-Ablimit ( Talwa Qiz )",
    //         "playCount": 466199,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Ablikim Ablimit",
    //         "artistId": 12118166,
    //         "duration": 251030,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 12118166,
    //             "name": "Ablikim Ablimit",
    //             "alias": null,
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10929390,
    //         "cover": "http://p1.music.126.net/2cXJJRroBgy2wULzQ0SQlg==/109951165923968787.jpg",
    //         "name": "Wheels on the Bus",
    //         "playCount": 178364,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "斑马儿歌",
    //         "artistId": 35229524,
    //         "duration": 152000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 35229524,
    //             "name": "斑马儿歌",
    //             "alias": [],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 5696012,
    //         "cover": "http://p1.music.126.net/EknvVEOf8QZos6dwMOWO-w==/109951163053400031.jpg",
    //         "name": "Uyghur kizi",
    //         "playCount": 845514,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Abdugini Ablikim",
    //         "artistId": 12038158,
    //         "duration": 188290,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 12038158,
    //             "name": "Abdugini Ablikim",
    //             "alias": null,
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10929614,
    //         "cover": "http://p1.music.126.net/Rp-IJ6LpijaP1lptAVuCOw==/109951167725323260.jpg",
    //         "name": "Oh my god | MBC音乐中心 20/04/18 现场版",
    //         "playCount": 61365,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "(G)I-DLE",
    //         "artistId": 14055085,
    //         "duration": 200000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 14055085,
    //             "name": "(G)I-DLE",
    //             "alias": ["(여자)아이들", "Cube新女团", "女孩子", "女孩子们", "여자 아이들", "女娃", "gidle"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10894787,
    //         "cover": "http://p1.music.126.net/GdOK2X9pAIU3YroZkHHA0w==/109951164417513957.jpg",
    //         "name": "Phoenix 涅槃 (英雄联盟2019全球总决赛主题曲)",
    //         "playCount": 5633378,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "Cailin Russo",
    //         "artistId": 12334074,
    //         "duration": 208000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 12334074,
    //             "name": "Cailin Russo",
    //             "alias": [],
    //             "transNames": null
    //         }, {
    //             "id": 964410,
    //             "name": "Chrissy Costanza",
    //             "alias": [],
    //             "transNames": null
    //         }, {
    //             "id": 1047337,
    //             "name": "英雄联盟",
    //             "alias": ["英雄联盟", "撸啊撸", "lol", "League of Legends"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 10929578,
    //         "cover": "http://p1.music.126.net/o9Rh84cpIF8BpnGyJTW2gA==/109951165526929399.jpg",
    //         "name": "Verde",
    //         "playCount": 20284,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "J. Balvin",
    //         "artistId": 309127,
    //         "duration": 250000,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 309127,
    //             "name": "J. Balvin",
    //             "alias": ["J Balvin", "j balvin"],
    //             "transNames": null
    //         }, {
    //             "id": 999423,
    //             "name": "Sky",
    //             "alias": ["soft rock /classical band", "soft rock /classical band"],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 462450,
    //         "cover": "http://p1.music.126.net/NZSgYJrX1zgOGTP10oqv1g==/7888995930490851.jpg",
    //         "name": "Counting Sheep (Official Video)",
    //         "playCount": 6972242,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "SAFIA",
    //         "artistId": 986155,
    //         "duration": 173080,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 986155,
    //             "name": "SAFIA",
    //             "alias": [],
    //             "transNames": null
    //         }]
    //     }, {
    //         "id": 5336769,
    //         "cover": "http://p1.music.126.net/BRNTmHJI0SilrYPm2t_TMA==/3251255892352165.jpg",
    //         "name": "小学生广播体操七彩阳光",
    //         "playCount": 1235198,
    //         "briefDesc": null,
    //         "desc": null,
    //         "artistName": "群星",
    //         "artistId": 122455,
    //         "duration": 281920,
    //         "mark": 0,
    //         "subed": false,
    //         "artists": [{
    //             "id": 122455,
    //             "name": "群星",
    //             "alias": ["原声带", "Various Artists", "华语群星"],
    //             "transNames": null
    //         }]
    //     }]
    // }

    //校验数据
    // 校验数据类型: string、bool、number、object、array、func还有element(react元素)
    //  必须传递:  isRequired
    //定义静态方法首字母必须小写
    static propTypes={
        //必须传入数组类,调用PropTYpes方法必须和导入定义的一样
        mvArr:PropTYpes.array.isRequired
    }
    //定义 props  默认数据
    static defaultProps={
        mvArr:[
            {
            "id": 5334103,
            "cover": "http://p1.music.126.net/G09rskU97H10HPPowgUIng==/1426066593488734.jpg",
            "name": "温暖你的冬 录音花絮2",
            "playCount": 61787,
            "briefDesc": null,
            "desc": null,
            "artistName": "欧阳娜娜",
            "artistId": 1087140,
            "duration": 146470,
            "mark": 0,
            "subed": false,
            "artists": [{
                "id": 1087140,
                "name": "欧阳娜娜",
                "alias": ["Nana Ou-yang", "娜比"],
                "transNames": null
            }]
        }]
    }

    render() {
        
        // let {mvArr}=this.state

        //用props传递数据过来解构赋值
        let {mvArr}=this.props;
        return (
            <div className='mv'>
                <ul>
                    {
                        mvArr.map((item)=>{
                            return <li key={item.id}>
                                <img src={item.cover} alt="" />
                                <h1 className='mvname'>{item.name.length>=5?item.name.substring(0,5)+'...':item.name}</h1>
                                <h2 className='artistName'>{item.artistName}</h2>
                            </li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Mv;